﻿@using FrogFoot.Utilities
@model FrogFoot.Areas.Home.Models.HomeViewModel
@{
    ViewBag.Title = "FrogFoot";
}

<style type="text/css">
     .btn-success {
         background-color: #00923e;
         color: #fff;
         font-size: 15px;
         font-family: Arial;
         border-radius: 4px;
     }

    .btn-success:hover {
        background-color: #00bd50;
    }

    .imgTextBox {
        position: relative;
        top: 15px;
    }

    .imgHeading {
        font-size: 42px;
        font-family: Arial;
        color: rgb(51, 51, 51);
        font-weight: 700;
    }

    .imgParagraph {
        font-size: 22px;
        font-family: Arial;
        color: #3e4b53;
        font-weight: 700;
        margin-top: -10px;
    }

    .mailIcon {
        position: fixed;
        right: 10px;
        top: 200px;
        background-color: #fff;
        border-radius: 100%;
        border: 2px #000 solid;
        padding: 20px;
        z-index: 999;
    }

    .homeLeadContainer {
        cursor: pointer;
        border-radius: 4px;
        width: 100%;
        height: 180px;
    }

    .homeLeadContainer a:hover {
        text-decoration: none;
    }

    .icon {
        position: relative;
        top: 35px;
    }

    .iconHeader {
        color: #00923e;
        font-family: Arial;
        font-weight: 700;
        font-size: medium;
        position: relative;
        top: 60px;
    }

    .registerButton {
        position: relative;
        font-weight: bolder;
        top: 120px;
        width: 200px;
        height: 55px;
        padding: 14px;
        font-size: large;
    }

    @@media screen and (max-width: 767px) {

        .imgTextBox {
            background-color: whitesmoke;
            padding: 5px;
        }

        .imgHeading {
            font-size: 20px;
            color: rgb(51, 51, 51);
        }

        .imgParagraph {
            font-size: 12px;
        }

        .registerButton {
            top: 120px;
            width: 130px;
            height: 35px;
            padding: 7px;
            font-size: medium;
        }
    }

    .postTitle {
        color: green;
        font-weight: bolder;
        text-decoration: none;
    }

    .newsHeader {
        margin-top: 30px;
        font-weight: bolder;
        color: grey;
        font-size: 16px;
        margin-bottom: 10px;
    }

    .moreNewsLink {
        font-weight: bolder;
        text-decoration: none;
        color: green;
    }

    .moreNewsLink:hover {
        color: darkgreen;
    }

    .altHeader {
        color: white;
    }

    .altButton {
        background-color: white;
        color: green;
    }

    .altButton:active {
        background-color: white;
        color: green;
    }

    .imgFade {
        height: 100%;
        background: -webkit-linear-gradient(left, rgba(255, 0, 0, 0.0) 43%, rgb(255, 255, 255) 84%);
        background: -o-linear-gradient(right, rgba(255, 0, 0, 0) 43%, rgb(255, 255, 255) 84%);
        background: -moz-linear-gradient(right, rgba(255, 0, 0, 0) 43%, rgb(255, 255, 255) 84%);
        background: linear-gradient(to right, rgba(255, 0, 0, 0) 43%, rgb(255, 255, 255) 84%);
    }

    .homeLeadContainer > .row {
        max-height: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

@{
    string bannerImgUrl = Model.Portal != null
                       && Model.Portal.CoverImage != null
                       && !string.IsNullOrEmpty(Model.Portal.CoverImage.AssetPath)
        ? "/Assets/PortalImage/" + Model.Portal.CoverImage.AssetPath : Url.Content("~/Content/banner.jpg");

    string header = Model.Portal != null ? Model.Portal.Name + "" : "Frogfoot Fibre Portal";
}

<div class="row" style="margin-bottom: 100px;">
    <div class="col-xs-12">
        <div class="form-group" style="margin-top: -15px;">
            <div class="mainImg" style="background: url('@(bannerImgUrl)') no-repeat; background-position: center; background-size: cover; height: 400px; text-align: center;">
                <div class="imgTextBox">
                    <h1 class="imgHeading">@header Fibre Portal</h1>
                    <p class="imgParagraph">Bring Fibre fueled internet to your suburb</p>
                </div>
                @Html.ActionLink("Order Here", "Register", "Account", new { quickOrder = true }, new {@class = "btn btn-success registerButton"})
            </div>
        </div>
    </div>

    <div class="col-sm-9">
        <div class="row">
            <div class="col-sm-12 text-center">
                <h3 style="color: green;">Why should I choose Fibre?</h3>
                <h4 style="color: grey; font-size: 20px;">
                    If <strong>slow</strong>, <strong>frustrating</strong> and <strong>unreliable</strong> describe your
                    Internet connection, then you should seriously consider @Html.ActionLink("registering", "Register", "Account", null, new { @style = "color: grey; font-weight: bolder;" }) for a Fibre connection.
                </h4>
            </div>

            <div class="col-sm-12">
                <div class="row">
                    <div class="col-sm-4 form-group" style="text-align: center">
                        <div class="homeLeadContainer">
                            <a id="howToGetIt">
                                <img src="~/Content/icons/icon-knowmore.png" class="icon" />
                                <p class="iconHeader">How can I get it?</p>
                            </a>
                        </div>
                    </div>
                    <div class="col-sm-4 form-group" style="text-align: center">
                        <div class="homeLeadContainer">
                            <a href="@Url.Action("Coverage", "Home")">
                                <img src="~/Content/icons/icon-coverage.png" width="128" height="128" class="icon" />
                                <p class="iconHeader">Coverage</p>
                            </a>
                        </div>
                    </div>
                    <div class="col-sm-4 form-group" style="text-align: center">
                        <div class="homeLeadContainer">
                            <a href="@Url.Action("Packages")">
                                <img src="~/Content/icons/icons-packages.png" width="128" height="128" class="icon" />
                                <p class="iconHeader">Packages</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-sm-3">
        @if (Model.Posts.Any())
        {
            <div class="homeLeadContainer">
                <div class="newsHeader">LATEST NEWS</div>
                @foreach (var p in Model.Posts)
                {
                    var imgUrl = "";
                    var bgColour = "";
                    if (p.PostImage != null)
                    {
                        imgUrl = "\'../../Assets/PostImage/" + p.PostImage.AssetPath + "\'";
                    }
                    else
                    {
                        bgColour = "green";
                        imgUrl = "\'../../Content/whitefrogfeet.png\'";
                    }

                    <div class="row" style="margin-bottom: 15px;">
                        <div class="col-xs-4">
                            <img style="background: url(@imgUrl) no-repeat center center; background-color: @bgColour; background-size: cover; height: 60px; width: 100%" />
                        </div>
                        <div class="col-sm-8" style="padding-left: 5px;">
                            @Html.ActionLink(p.Title, "Post", "News", new { postId = p.PostId }, new { @class = "postTitle" })
                            @{ var postBody = HtmlStripper.Strip(p.Body); }
                            <p>@Html.Raw(postBody.Truncate(60) + "...")</p>
                        </div>
                    </div>
                }
                <div>
                    <a href="@Url.Action("Index", "News")" class="moreNewsLink">More news</a><span class="glyphicon glyphicon-chevron-right" style="color: green; margin-left: 15px;"></span>
                </div>
            </div>
        }
    </div>
</div>

<div class="row">
    <div class="col-sm-12 text-center" style="background: #00923E;">
        <img class="icon" src="~/Content/icons/icon-fibre.png" style="margin-bottom: 45px;" />
        <h2 class="altHeader">What is FTTH?</h2>
        <h4 class="altHeader" style="margin: 0 60px;">
            Fibre to the home (FTTH), replaces the tired old copper phone cable to your home
            with optical fibre capable of blazingly fast speeds. Your Internet connection can
            now experience a dramatic improvement. No more long delays while files, music or
            videos download. Not only that, but a whole new world of online services will become available to you.
        </h4>

        <div style="margin-top: 45px; padding-bottom: 30px;">
            @Html.ActionLink("Find out more", "WhatIsFTTH", null, new { @class = "btn altButton" })
        </div>
    </div>
</div>

<div class="row">
    <div id="scrollDestination" style="background: url(/Content/640-Woman-iPad.jpg) no-repeat center center; background-size: cover; height: 500px;">
        <div class="imgFade">
            <div class="col-md-4 col-sm-5 col-xs-6 pull-right">
                <h2 style="color: green; margin-top: 60px;">How do I get FTTH through Frogfoot?</h2>
                <h4 style="color: grey; margin-bottom: 45px">
                    First, you might like to check our <a href="@Url.Action("Coverage")" style="color: grey; font-weight: bolder;">Coverage</a> maps to see if Frogfoot offers fibre to your suburb.
                    Then, we encourage you to <a href="@Url.Action("Register", "Account")" style="color: grey; font-weight: bolder;">Register</a> your interest in FTTH with us. You can then browse the fibre
                    broadband options from Frogfoot affiliated ISPs and place an order for your preferred broadband package.
                    Once the fibre network is extended past your house, your FTTH service will be installed.
                </h4>
                @Html.ActionLink("Register", "Register", "Account", null,  new {@class = "btn btn-success"})
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xs-12 text-center">
        <img style="margin-top: 45px;" src="~/Content/icons/frogfeet-green.png" />
        <h2 style="color: grey;">Why choose us?</h2>
        <h4 style="color: grey; margin-top: 45px;padding: 0 60px">
            Fibre is fibre, right? You'd think it would make no difference who supplies it, but that's not quite true.
            Firstly, it is preferable to ensure you get Open Access fibre. Open Access fibre ensures that you can
            choose between any number of ISPs and can move from one ISP to another while using the same fibre connection.
            Secondly, large fibre networks are not simple to plan and build and can be tricky to manage well. Frogfoot not
            only has a true Open Access FTTH network, but also a reputation for technical knowledge and engineering excellence;
            your FTTH is safe in our hands.
        </h4>

        <div style="margin-top: 45px;margin-bottom: 45px;">
            @Html.ActionLink("Find out more", "About", null, new { @class = "btn btn-success" })
        </div>
    </div>
</div>

@section Scripts {
    <script type="text/javascript">
        $(function() {
            $('#video').on('click', function() {
                $('#videoModal').modal('show');
            });

            $("#howToGetIt").click(function () {
                $('html, body').animate({
                    scrollTop: $("#scrollDestination").offset().top -50
                }, 1000);
            });
        });
    </script>
}
